<template>
 <view class="main">
  <view class="part ap23">
	  <view class="part1">
		 <view class="part1-1">
			<view class="pp1">
			  <view class="pp1-1">当前订单</view>
			  <view class="pp1-2">订单号：{{oinfo.ordersn}}</view>
			</view>
			<view class="pp2" v-if="zt==0">
			  <view class="pp2-1">
				<image src="https://ppp.new.zeroitem.cn/ppp/corder/1.png" class="pimg1"></image> 
				<image src="https://ppp.new.zeroitem.cn/ppp/corder/15.png" class="pimg2"></image>
			  </view>
			  <view class="pp2-2">【已发布】</view> 
			  <view class="pp2-3" @click="qxdd" v-if="oinfo.persion_pingjia==1 && zt<=1">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/9.png" class="pimg3"></image>
			  </view>
			</view>
			
			<view class="pp2" v-if="zt>=1 || zt==-2">
			  <view class="pp2-1">
				<image :src="oinfo.pavatar" class="pimg1"></image> 
				<image src="https://ppp.new.zeroitem.cn/ppp/corder/15.png" class="pimg2"></image>
			  </view>
			   <view class="pp2-2" v-if="zt==-2 && oinfo.qinfo.zt==0" style="color:red">【取消审核种】</view> 
			   <view class="pp2-2" v-if="zt==-2 && oinfo.qinfo.zt==1" style="color:red">【已取消】</view> 
			  <view class="pp2-2" v-if="zt==1">【未开始】</view> 
			  <view class="pp2-2" v-if="zt==2">【进行中】</view> 
			  <view class="pp2-2" v-if="zt==3">【已提交作品】</view>
			  <view class="pp2-2" v-if="zt==4">【拍摄结束】</view>
			  <view class="pp2-2" v-if="zt==5">【已完成】</view>
			  <view class="pp2-3" @click="qxdd" v-if="oinfo.persion_pingjia==1 && zt<=1 && zt!=-2">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/9.png" class="pimg3"></image>
			  </view>
			</view>			
		 </view> 
		 
		 <view class="part2c" style="margin-top:50rpx">
			<view class="pt2-1">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/7.png" class="pimg4"></image>
			   时间
			</view>
			<view class="pt2-2">{{oinfo.pdate1}}     {{oinfo.sj}}</view>  
		 </view>
		 <view class="line"></view>
		 
		 <view class="part2c">
			<view class="pt2-1">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/6.png" class="pimg4"></image>
			   地点
			</view>
			<view class="pt2-2">{{oinfo.jtdz}}</view>  
		 </view>
		 <view class="line"></view>		 

		 <view class="part2c">
			<view class="pt2-1">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/4.png" class="pimg4"></image>
			   联系电话
			</view>
			<view class="pt2-2">{{oinfo.phone}}</view>  
		 </view>
		 <view class="line"></view>
				  
		 <view class="part2c">
			<view class="pt2-1">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/5.png" class="pimg4"></image>
			   拍摄要求
			</view>
			<view class="pt2-2">
			 {{oinfo.remark1}}  
			 <text class="ckbtn" @click="ckbtn" v-if="oinfo.slice_type>0 || oinfo.remark!=''">查看详情</text>
			</view>  
		 </view>
		 <view class="line"></view>				  

		 <view class="part2c">
			<view class="pt2-1">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/6.png" class="pimg4"></image>
			   费用
			</view>
			<view class="pt2-2">{{oinfo.total_price}}  ￥</view>  
		 </view>
		
		<view class="part2" v-if="zt<2">
			<image src="https://ppp.new.zeroitem.cn/ppp/corder/2.png" class="pimg5"></image>
			<view class="part2-c">
			 <view class="part2-c1">{{oinfo.min}}</view>	
			 <view class="part2-c2">min</view>
			 <image src="https://ppp.new.zeroitem.cn/ppp/corder/10.png" class="pimg6" @click="zjsc()" v-if="oinfo.persion_pingjia==1 && zt<=3"></image>
			</view>
			<view class="part2-b">总时间</view>
		</view> 
		
		<view class="part2 ap2" v-if="zt>=2">
	        <view class="part2-h">
			  <view class="part2-h-1">总时长</view>  
			  <view class="part2-h-2">
				<image src="https://ppp.new.zeroitem.cn/ppp/corder/2.png" class="pimg12"></image>  
			  </view> 
		   </view>
	        <view class="part2-h1">
			  <view class="part2-h1-1">{{oinfo.min}}</view>  
			  <view class="part2-h1-2">min</view>
			  <view class="part2-h1-3">起始时间  {{oinfo.pstime1}}</view>
		    </view>
           <view class="part2-h2">剩余时长</view>
		   <view class="part2-h3">
		     <view class="part2-h3-1">{{oinfo.spmin}}</view>  
		     <view class="part2-h3-2">min</view>
			 <image src="https://ppp.new.zeroitem.cn/ppp/corder/10.png" class="pimg13" @click="zjsc()" v-if="oinfo.persion_pingjia==1 && zt<=3"></image>  
		   </view>
		   
		</view> 		
		
		<view class="partvideo ap3">
		   <video :src="video_src" style="width:444rpx;height:250rpx;" objectFit="cover" class="pimg17" :poster="video_pic" v-if="video_src!=''"></video>
		   <image :src="video_pic" style="width:444rpx;height:250rpx;" class="pimg17" v-if="video_src==''"></image>
		   <view class="part2-r">
			   <view class="pm1" :class="[{'pm_cur':video_v == 1}]" @click="version(1)">◁ 版本1</view>
			   <view class="pm1" :class="[{'pm_cur':video_v == 2}]" @click="version(2)">◁ 版本2</view>
			   <view class="pm1" :class="[{'pm_cur':video_v == 3}]" @click="version(3)">◁ 版本3</view>
			   <view class="pm2" @click="downloadvideo()">下载成片</view>
		   </view>
		</view>  
		 <button open-type="share" class="fxbtn" v-if="video_src!=''">查看分享视频</button>	
	  </view>     
   </view>
     <view class="part3" v-if="zt==0　&&　oinfo.persion_pingjia==1">
		<view class="p3-1">
		  <image src="https://ppp.new.zeroitem.cn/ppp/corder/14.png" class="pimg7"></image>	
		</view> 
		<view class="p3-2">
		  <image src="https://ppp.new.zeroitem.cn/ppp/sm.png" class="pimg8"></image>	
		</view>
		<view class="p3-3" @click="tjbz">
		  <image src="https://ppp.new.zeroitem.cn/ppp/corder/3.png" class="pimg9"></image>	
		</view>
	 </view>
	 
 <view class="part3" v-if="zt==1 &&　oinfo.persion_pingjia==1">
 		<view class="p3-4" @click="lxps()">
 		  <image src="https://ppp.new.zeroitem.cn/ppp/corder/17.png" class="pimg10"></image>	
 		</view> 
 		<view class="p3-5" @click="startp()">
 		  <image src="https://ppp.new.zeroitem.cn/ppp/corder/20.png" class="pimg11"></image>	
 		</view>
 </view> 	 

 <view class="part3" v-if="zt==4　&&　oinfo.persion_pingjia==1" @click="qrwc">
    <image src="https://ppp.new.zeroitem.cn/ppp/corder/21.png" class="pimg16"></image>			
 </view> 
	  
     <view class="part3" v-if="zt==5　&&　oinfo.persion_pingjia==1">
		<view class="p3-6" @click="wqdd">
		  <image src="https://ppp.new.zeroitem.cn/ppp/corder/24.png" class="pimg19"></image>	
		</view>
		 <button open-type="share"  class="p3-7">
		   <image src="https://ppp.new.zeroitem.cn/ppp/fx3.png" class="pimg20"></image>	
		  </button>
		<view class="p3-8" @click="pingjia">
		  <image src="https://ppp.new.zeroitem.cn/ppp/corder/22.png" class="pimg21"></image>	
		</view>
	 </view>	  
	  
   <view class="mask" v-if="tc1==1">
      <view class="qtc">
		<view class="tctxt-1">
		  ！开拍前一小时内
		  取消订单需支付违约金	
		</view> 
		<view class="tctxt-2">是否取消订单</view> 
		<view class="tcbtn1">
		  <view class="tcbtn btn1" @click="qxdd1()">否</view>
		  <view class="tcbtn btn2" @click="qxdd2()">是</view>
		</view>
	  </view>
   </view>	  
	
   <view class="mask" v-if="tc2==1">
      <view class="qtc">
		<view class="tctxt-1 txt1">
			确认拍手已经将拍摄内容和剪辑文稿
			向您展示，确认完成后拍手可将高清
			视频上传供您下载使用。
		</view> 
		<view class="tctxt-2 txt2">是否确认拍手完成</view> 
		<view class="tcbtn1 btnm">
		  <view class="tcbtn btn1" @click="qrwc1()">否</view>
		  <view class="tcbtn btn2" @click="qrwc2()">是</view>
		</view>
	  </view>
   </view>		
	
   <view class="mask" v-if="tc3==1">
      <view class="qtc">
		<view class="tctxt-1 txt1">
			确认拍手已经到达现场开始拍摄,
			确认后开始计算拍摄时长。
		</view> 
		<view class="tctxt-2 txt2">是否确认拍手达到</view> 
		<view class="tcbtn1 btnm">
		  <view class="tcbtn btn1" @click="psdd1()">否</view>
		  <view class="tcbtn btn2" @click="psdd2()">是</view>
		</view>
	  </view>
   </view>	
	
	<view class="mask" v-if="tc4==1">
		 <view class="sliceadd">
			<view class="slice1">
	          <view class="slice1-1" @click="show_slice_type(1)">
				  <view class="dot1" v-if="slice_type==1"></view> 
				  <image src="https://ppp.new.zeroitem.cn/ppp/icon1.png" class="img12"></image>
				  <view class="slice-1-txt">网络链接</view>
			   </view>
			   <view class="slice1-1" style="margin-left:68rpx" @click="show_slice_type(2)">
				 <view class="dot1" v-if="slice_type==2"></view>
				 <image src="https://ppp.new.zeroitem.cn/ppp/icon2.png" class="img12"></image>
				 <view class="slice-1-txt">本地上传</view>
			   </view>
			</view>
			<view class="line2 line-a"></view>
			<block v-if="slice_type==1">
			 <view class="sinput">
			  <input type="text" placeholder="请粘体链接地址"  class="sinput1" v-model="plink"></input>
			 </view>	
			</block>
			
		<block v-if="slice_type==2 && vname==''">
		 <view class="sinput" @click="uploadvideo">
		  <input type="text" placeholder="选择相册文件"  class="sinput2"></input>
		 </view>	
		</block>
		<block v-if="slice_type==2 && vname!=''">
		 <view class="sinput3">
		   <view class="sinput3-1">{{vname}}</view>
		   <view class="sinput3-2">
			 <view class="cir">100%</view>   
		   </view>
		 </view>	
		</block>		
			<view class="tjbtn" @click="tjslice">确认提交</view>
		 </view>
	</view>
	
 <view class="mask" v-if="tc5==1">
	 <view class="bztc">
		<view class="bz1" @click="tjckp">
			<view class="bzinfo">
				<view class="txt5">{{wfile}}</view>
			</view>
			<image src="https://ppp.new.zeroitem.cn/ppp/add.png" class="img11"></image>
			添加参考片
		</view>
		<view class="line2"></view>
		<textarea placeholder="请输入备注内容" class="barea" v-model="remark"></textarea>
		<view class="line2"></view>
		<view class="tjbtn" @click="tjbz1">确认提交</view>
	 </view>
 </view>
	   
 <view class="mask" v-if="tc6==1">
	 <view class="bztc1">
		 <view class="bzpp1">拍摄备注</view>
		 <view class="line2" style="margin-top:10rpx"></view>
		 <textarea placeholder="请输入备注内容" class="barea" v-model="remark"></textarea>
		  <block v-if="vname!=''">
	      <view class="bzpp1">参考视频</view>
		  <view class="line2" style="margin-top:10rpx"></view>
	       <video :src="cvideo_src"  objectFit="cover" class="pimg17" style="margin-left:10rpx;" ></video>
		   </block>
		   <block v-if="plink!=''">
	       <view class="bzpp1">参考链接</view>
		   <view class="line2" style="margin-top:10rpx"></view>
		   <textarea class="barea" v-model="plink" style="height:100rpx" @click="copylink"></textarea>
		    </block>
			<view class="line2"></view>
			<view class="tjbtn" @click="closetc6">确定</view>
	 </view>
 </view>	   
	   
	   
	   
	   
	 
 </view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		toLogin
	} from '@/utils/login'
	import {
	   getOrderDetail,qrorder,tjremark
	} from '@/api/ppp'	
	import {
		loadingFun,
		menuJump
	} from '@/utils/tools'	
	import {
	  uploadFileToTencentClound
	} from '@/js_sdk/COS'
	import {
		loadingType
	} from '@/utils/type'
	export default {
	    data() {
	        return {
             zt:0,
			 tt:null,
			 showtc:0,
			 tc1:0,
			 tc2:0,
			 tc3:0,
			 tc4:0,
			 tc5:0,
			 tc6:0,
			 oid:0,
			 oinfo:[],
			 video_v:1,
			 video_src:"",
			 video_pic:"",
			 cvideo_src:"",
			 slice_type:1,
			 vname:"",
			 wfile:"",
			 plink:"",
			 remark:""
	        }
	    },
		onShow(){
		  console.log(this.oinfo);
		},
		onLoad(options){
		 var oid=options.oid;
		 this.oid=oid;
		 this.getOrderDetail(oid);
		},
		onShareAppMessage(res) {
		  var oid=this.oid;
		  var pic=this.video_pic;
           return {
         　　　 　title:'片拍拍精选视频展示',
                  path: "/pages/ppp/ps/zpshare?type=2&id="+oid,
                 imageUrl: pic
         　　}
		},
	    methods: {
		 closetc6(){this.tc6=0;},
		 ckbtn(){this.tc6=1;},
		 tjslice(){this.tc5=1;this.tc4=0;},	
		 show_slice_type(type){this.slice_type=type;},
		 tjckp(){this.tc5=0;this.tc4=1;},
		 tjbz(){this.tc5=1;console.log("bbbp")},
		 show_slice_type(type){this.slice_type=type;},
		 daojishi(){
		   var ss=parseInt(this.oinfo.spmin); 
		   var tt=this.tt;
		   var s1=ss-1;
		   var self=this;
		   if(s1<=0){
			this.oinfo.spmin=0;
		    clearTimeout(tt);
		   }else{
			 this.oinfo.spmin=s1;
		     tt=setTimeout(function(){
				self.daojishi(); 
			 },60000);
		    }
		 },
		 
		 qxdd(){
		  this.tc1=1;
		 },
		 qxdd1(){
		  this.tc1=0; 
		 },
		 qrwc(){
		  this.tc2=1; 
		 },
		 qrwc1(){
		  this.tc2=0;	 
		 },
		 zjsc(){
		  uni.navigateTo({
		  	url:"/pages/ppp/order/ztime?oid="+this.oid
		  })
		 },
		 async qrwc2(){
			const{
			  code,
			  msg,
			  data
			  }= await qrorder(this.oid,5);	
	        if(data.suc==0){
			 uni.showToast({title:data.msg,icon:"none"});  
	        }
	        if(data.suc==1){
				this.tc2=0;
				this.getOrderDetail(this.oid);
	          }		  
		 },
       version(type){
		this.video_v=type;
		var version=this.oinfo['version'];
		if(type==1){
		 this.video_src=version[0]['video_src'];
		 this.video_pic=version[0]['video_pic'];	
		}
		if(type==2){
		 this.video_src=version[1]['video_src'];
		 this.video_pic=version[1]['video_pic'];
		}
		if(type==3){
		 this.video_src=version[2]['video_src'];
		 this.video_pic=version[2]['video_pic'];
		}
	  },
		downloadvideo(){
		  if(this.video_src==''){
	       uni.showToast({title:'当前版本没有上传成片，无法下载',icon:"none"});
		  }	
		  uni.setClipboardData({data:this.video_src})
			uni.showModal({
				title: '提示',
				content: '您已经复制了当前视频成片的下载链接，您可以把下载链接粘帖到浏览器或者粘帖到微信聊天里面进行下载',
				confirmText: "确认", // 确认按钮的文字  
				showCancel: true, // 是否显示取消按钮，默认为 true
				confirmColor: '#f55850',
				cancelColor: '#39B54A',
				success: (res) => {
	 
				} 
			})
		},
		copylink(){
		  uni.setClipboardData({data:this.plink})
		  			uni.showModal({
		  				title: '提示',
		  				content: '您已经复制了当前的参考链接，您可以把参考链接粘帖到浏览器或者粘帖到微信聊天里面进行查看',
		  				confirmText: "确认", // 确认按钮的文字  
		  				showCancel: true, // 是否显示取消按钮，默认为 true
		  				confirmColor: '#f55850',
		  				cancelColor: '#39B54A',
		  				success: (res) => {
		  				} 
		  			})	
		},
			   
		  uploadvideo(){
			 var that=this;
			uni.chooseVideo({
				sourceType: ['camera', 'album'],
				success: function (res) {
				  let filePath = res.tempFilePath;
				  let ext = filePath.substr(filePath.lastIndexOf('.') + 1);
				  var timestamp = (new Date()).valueOf();
				  var filename=timestamp+"."+ext;
				  uni.showLoading({title:"视频上传中",mask:true});
				  uploadFileToTencentClound(filename,filePath).then((res1)=>{
				  	that.vname=filename;
					that.wfile="文件:"+filename;
					that.cvideo_src='https://ppp-1300934138.cos.ap-shanghai.myqcloud.com/wxFile/'+filename;
					uni.hideLoading();
				  })
				 }
		    });  
		  },			   
		  async tjbz1(){ 
		   this.tc5=0;
		   const{
		     code,
		     msg,
		     data
		     }= await tjremark({oid:this.oid,slice_type:this.slice_type,remark:this.remark,plink:this.plink,vname:this.vname});
			if(code==1){
			  this.getOrderDetail(this.oid);	
			}	 
		  },   
			   
			   
			   
		wqdd(){
			uni.navigateTo({
				url:"/pages/ppp/index/dqdd"
			})	
		},
		 pingjia(){
		  uni.navigateTo({
		  	url:"/pages/ppp/order/pingjia?oid="+this.oid
		  })	 
		 },
		 lxps(){
		   var phone=this.oinfo.psphone;
		   uni.makePhoneCall({
		   	 phoneNumber:phone
		   })	 
		 },
		 startp(){this.tc3=1;},
		 psdd1(){this.tc3=0;},
		 async qxdd2(){
		   const{
		     code,
		     msg,
		     data
		     }= await qrorder(this.oid,-1);	 
			 if(data.suc==0){
			  uni.showToast({title:data.msg,icon:"none"});  
			 }
			 if(data.suc==1){
			 	this.tc1=0;
			 	this.getOrderDetail(this.oid);
			 }
		 },
		 async psdd2(){
			const{
			  code,
			  msg,
			  data
			  }= await qrorder(this.oid,3);	
	        if(data.suc==0){
			 uni.showToast({title:data.msg,icon:"none"});  
	        }
	        if(data.suc==1){
				this.tc3=0;
				this.getOrderDetail(this.oid);
	        }
		 },
		async getOrderDetail(oid){
			  const{
			  code,
			  msg,
			  data
			  }= await getOrderDetail(oid);
			  this.oinfo=data; 
			  var zt=parseInt(data.step)-1;
			  this.zt=zt;
			  var version=data['version'];
			  this.video_src=version[0]['video_src'];
			  this.video_pic=version[0]['video_pic'];
			  this.remark=data.remark;
			  this.slice_type=data.slice_type;
			  this.plink=data.plink;
			  if(data.sinfo!='' && data.sinfo!=undefined){
				this.vname=data.sinfo;
				this.wfile="文件:"+data.sinfo;  
				this.cvideo_src='https://ppp-1300934138.cos.ap-shanghai.myqcloud.com/wxFile/'+data.sinfo;
			  }
			  if(this.zt>=2){
			   this.daojishi();
			  }
		 }
		 
		 
	    }
	}
</script>

<style>
@import "./order1.css";	
</style>
